<template>
  <div >
    <div style="width: 25%; border-radius: 4px;margin: 0 auto" >
      <el-form :model="product" label-width="80px">
        <el-form-item label="音乐名称">
          <el-input v-model="product.musicname"></el-input>
        </el-form-item>
        <el-form-item label="歌手名称">
          <el-input v-model="product.singer"></el-input>
        </el-form-item>
        <el-form-item label="音乐时长">
          <el-input v-model="product.longtime"></el-input>
        </el-form-item>
        <el-form-item label="音乐类型">
          <el-select v-model="product.musicType.typeid"  placeholder="请选择">
            <el-option label="请选择" value="0"></el-option>
            <el-option v-for="tp in typeList" :label="tp.typename" :value="tp.typeid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="歌曲描述">
          <el-input v-model="product.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">确认添加</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
  export default {
    name: "Add",
    data() {
      return {
        product:{
          musicname:'',
          singer:'',
          longtime:'',
          musicType:{
            typeid:'',
          },
          collectCount:'0',
          description:'',
          musicImg:'',

        },
        typeList:[]
      }
    },
    created(){
      this.axios.get("http://127.0.0.1:8080/shopping/type/typeList").then((result)=>{
        this.typeList=result.data.data
      })
    },
    methods:{
      add(){
        this.axios.post("http://127.0.0.1:8080/shopping/music/add",JSON.stringify(this.product)).then((result)=>{
          this.$router.push("/home")
        })
      }
    }
  }
</script>

<style scoped>
</style>
